﻿@charset "utf-8";

#statusbar-display {display:none !important;}
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin:0;
    padding:0;
    border:0;
    font-size: 100%;
    font-weight: 400;
    background: transparent;
}

body, button, select, textarea, input {
    font-family:"Hiragino Sans GB","Microsoft Yahei",arial,\5b8b\4f53,"Helvetica Neue",Helvetica,STHeiTi,sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 300px;
    background-color: #000;
    background: url(../img/personalCenter/chatBg.jpg) repeat-x #e0e0e0;
}
a {
    margin:0;
    padding:0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    color: #999;
}
a.fancybox{
    display:inline-table;
    outline:none;
}
img, object, embed {
    max-width: 100%;
}

body{
    min-width: 1370px !important;
}

.main{
    position: relative;
    width: 1370px;
    height: 100%;
    margin: 60px auto 0;
    border-radius: 5px;
}
.S-chatBox {
    position: relative;
    width:299px;
    height:901px;
    float: left;
    background-color: #333;
    z-index:1;
    border-bottom-right-radius: 5px;
}
.S-chatBox .S-sideBar {
    width: 300px;
}
.S-chatBox .S-sideBar .chatBox {
    width: 300px;
}
.S-chatBox .S-sideBar .chatBox .title .list {
    background: #333;
    color: #999;
    height: 45px;
}
.S-chatBox .S-sideBar .chatBox .title .list .tab {
    display: inline-block;
    width: 49%;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}
.S-chatBox .S-sideBar .chatBox .title .list .tab.active {
    color: #00a4e9;
}
.S-chatBox .S-sideBar .chatBox .title .line {
    width: 100%;
    height: 2px;
    background: #242424;
}
.S-chatBox .S-sideBar .chatBox .title .line .moveLine {
    top: -1px;
    width: 150px;
    height: 3px;
    background-color: #188eee;
}
.S-chatBox .S-sideBar .chatBox .main_notice .close {
    position: absolute;
    margin-left: 280px;
    font-size: 14px;
    color: #999;
    z-index: 99;
}
.S-chatBox .S-sideBar .chatBox .main_notice .close:hover {
    color: #efefef;
}
.S-chatBox .S-sideBar .chatBox .main_notice .tab_line {
    line-height: 4px;
    width: 47px;
    left: 50%;
    margin-left: -24px;
    top: 95px;
    z-index: 99;
}
.S-chatBox .S-sideBar .chatBox .main_notice .tab_line a {
    display: inline-block;
    width: 25px;
    height: 10px;
    margin-right: -8px;
}
.S-chatBox .S-sideBar .chatBox .main_notice .tab_line a span {
    background-color: #404040;
    width: 17px;
    height: 2px;
    margin: 4px;
    display: block;
}
.S-chatBox .S-sideBar .chatBox .main_notice .tab_line a.active span {
    background-color: #717171;
}
.S-chatBox .S-sideBar .chatBox .main_box {
    height: 110px;
    background:#2a2e32;
}
    .S-chatBox .S-sideBar .chatBox .main_box .notice .mod-notice {
        padding: 25px 20px 0;
        font-size: 14px;
        width: 260px;
        height: 62px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #999;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all;
        display: -webkit-box;
    }
.S-chatBox .S-sideBar .chatBox .main_box .notice .notice_text {
    margin: 0 20px 0;
    padding-top: 20px;
    font-size: 14px;
    width: 260px;
    height: 62px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ccc;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    display: -webkit-box;
}
.S-chatBox .S-sideBar .chatBox .main_box .notice_text .notice_title {
    font-weight: 700;
    margin-right: 2px;
    color: #fff;
}
.S-chatBox .S-sideBar .chatBox .main_box .notice_text a {
    color: #167ed9;
}
.S-chatBox .S-sideBar .chatBox .propaganda,
.S-chatBox .S-sideBar .chatBox .main_box .notice {
    background:#2a2e32;
}
.S-chatBox .S-sideBar .chatBox .propaganda .msg,
.S-chatBox .S-sideBar .chatBox .propaganda .title {
    color: #fff;
}
.S-chatBox .chatBox .handleBox .faceSelector {
    width: 445px;
    height: 210px;
    left: -164px;
    top: -225px;
}
.S-chatBox .chatBox .handleBox .innerFace {
    width: 420px;
    height: 198px;
}
.S-chatBox .chatBox .handleBox .bg {
    width: 445px;
    height: 210px;
}
.S-chatBox .S-sideBar .chatBox .notice_icon {
    background: url("../img/icons/notice.png") no-repeat center;
    height: 14px;
    width: 32px;
    margin:0 0 0 260px;
    cursor: pointer;
    z-index: 99;
}
.S-chatBox .S-sideBar .chatBox .talkBox .tip-text {
    color: #272727;
}
.S-chatBox .S-sideBar .chatBox .talkBox .warn-text {
    top: 0;
    color: #272727;
}
.S-chatBox .chatBox .talkBox .chatList .flowerMsg,
.S-chatBox .chatBox .handleBox {
    background:#1d1d1d;
}
.S-chatBox .chatBox .handleBox .group {
    margin-top: 5px !important;
}
.S-chatBox .chatBox .talkBox .chatList .flowerMsg,
.S-chatBox .chatBox .talkBox .chatList .warningMsg {
    margin:10px 0 0 30px;
}
.S-chatBox .chatBox .talkBox .chatList .flowerMsg {
    color: #b3b3b3;
}
.S-chatBox .chatBox .talkBox .chatList .warningMsg {
    background: #404040;
}
.S-chatBox .chatBox .inputBox .submitBtn {
    background: #00a4e9;
}
.S-chatBox .chatBox .inputBox .submitBtn:hover {
    background: #0c87bc;
}
.S-chatBox .chatBox .inputBox .submitBtn.disable {
    background: #888;
    cursor: default;
}
.S-chatBox .chatBox .inputBox .editorContent,
.S-chatBox .chatBox .talkBox .chatList .content {
    color: #eaeaea;
    display: inherit;
}
.S-chatBox .chatBox .tabIndex .memberList {
    overflow: hidden;
    background-color: #333;
    font-size: 14px;
    overflow-y: auto;
}
.S-chatBox .chatBox .tabIndex .memberList .list-item {
    width: 100%;
    float: left;
    padding: 5px 20px 5px 12px;
}
.S-chatBox .chatBox .tabIndex .memberList .list-item:last-child {
    margin-bottom: 0;
}
.S-chatBox .chatBox .tabIndex .memberList li.group-item {
    padding: 13px 20px 13px 12px;
    cursor: pointer;
    background-color: #2e2e2e;
}
.S-chatBox .chatBox .tabIndex .memberList .avatar {
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
    background-position: 0;
    background-size: contain;
    border-radius: 50%;
    background-repeat: no-repeat;
}
.S-chatBox .chatBox .tabIndex .memberList .list-item .mark {
    bottom: -22px;
    right: -25px;
    width: 14px;
    height: 14px;
    background-image: url(http://img.yxs.shenyecg.com/Image/5LwLflwFQGlcs8fuUO80oijBqqTrj3uQ/7TzXawHAeK.png);
    background-repeat: no-repeat;
}
.S-chatBox .chatBox .tabIndex .memberList .list-item .mark.approveGold {
    background-position: -101px -10px;   
}
.S-chatBox .chatBox .tabIndex .memberList .list-item .mark.approveBlue {
    background-position: -100px -46px;
}
.S-chatBox .chatBox .tabIndex .memberList .member-name {
    display: inline-block;
    margin-left: 10px;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    float: left;
    color: #b5b5b5;
}
.S-chatBox .chatBox .tabIndex .memberList .join-group {
    opacity: 0;
    font-size: 13px;
    color: #188eee;
    padding-left: 50px;
    vertical-align: top;
}
.tabIndex .memberList li.group-item:hover .join-group {
    opacity: 1;
}
.S-chatBox .chatBox .tabIndex .pageCtrl {
    bottom:-50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: #333;
}
.S-chatBox .chatBox .tabIndex .pageCtrl a {
    width: 80px;
    height: 30px;
    line-height:30px;
    font-size: 14px;
    color: #dcdcdc;
    margin-right: 20px;
}
.S-chatBox .chatBox .tabIndex .pageCtrl a:hover {
    background: #444;
}

/*弹出框*/
.pleaseLogin {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 370px;
    margin-top: -185px;
    margin-left: -190px;
    background-color: #00a2e9;
    z-index: 99;
}
.pleaseLogin h2.title {
    font-size: 20px;
    color: #fff;
    margin:32px 0 20px;
    text-align: center;
}
.pleaseLogin .loginBox {
    width: 380px;
    padding: 90px 0 74px;
    text-align: center;
    background:url("../img/tanchukuangBg.png") no-repeat;
}
.pleaseLogin .loginBox .information,
.pleaseLogin .loginBox .info-message {
    font-size: 16px;
    color: #555;
    margin-bottom: 60px;
}
.pleaseLogin .loginBox .information a,
.pleaseLogin .loginBox .info-message a {
    color: #00a2e9;
    text-decoration: underline;
}
.pleaseLogin .loginBox .buttons a {
    display: inline-block;
    width: 136px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 13px;
    border:1px solid #00a2e9;
}
.pleaseLogin .loginBox .buttons a.goLogin {
    background-color: #fff;
    color: #00a2e9;
    margin-right: 40px;
}
.pleaseLogin .loginBox .buttons a.completeLogin {
    background-color: #00a2e9;
    color: #fff;
} 

/*教师端聊天窗口，左边导航栏*/
.main .topNav {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #2d2d2d;
    border-radius: 5px 5px 0 0;
}
.main .topNav .course-title {
    font-size: 12px;
    color: #fff;
    margin:0 auto;
    text-align: center;
    max-width: 350px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
.main .navList {
    float: left;
    width: 70px;
    height: 901px;
    position: relative;
    background: #2a2e32;
    -webkit-border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
}
.main .navList .bottomSelect li {
    width: 100%;
    height: 26px;
    line-height: 26px;
    margin-bottom: 8px;
    text-align: center;
}
.main .navList .bottomSelect li.getUrl {
    width:60px;
    height:26px;
    margin-left: 5px;
    background: #00a2e9;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height:26px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}
.main .navList .getUrl:hover {
    background:#02affb;
}
.main .navList .getUrl.disabled {
    background:#696c6e;
    color: #acabaa;
    cursor: default;
}
.main .navList .bottomSelect li.totalTime {
    font-size: 12px;
    color: #fff;
    margin-bottom: 0
}
.main .navList .bottomSelect li.signal {
    height: 20px;
}
.main .navList .bottomSelect li.getUrl,.main .navList .bottomSelect li.totalTime,.main .navList .bottomSelect li.signal{
    visibility: hidden;
}
.main .navList .usersInfo {
    position: absolute;
    top: 20px;
    width: 70px;
    text-align: center;
}
.main .navList .usersInfo .usersIcon {
    width: 45px;
    height: 45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.main .navList .usersInfo .mark {
    width: 17px;
    height: 17px;
    bottom: 3px;
    right: 12px;
    background-image: url("http://img.yxs.shenyecg.com/Image/5LwLflwFQGlcs8fuUO80oijBqqTrj3uQ/7TzXawHAeK.png");
    background-repeat: no-repeat;
}
.main .navList .usersInfo .mark.approveGold {
    background-position: -56px -8px;
}
.main .navList .usersInfo .mark.approveBlue {
    background-position: -57px -44px;
}
.main .navList .usersInfo .usersNickName {
    font-size: 12px;
    color: #acabaa;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
} 
.main .navList .packUp{
    position: absolute;
    top:130px;
    left: 50%;
    margin-left:-30px ;
    width:60px;
    height:26px;
    background: #747474;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height:26px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}
.main .navList span.lines {
    position: absolute;
    top: 120px;
    display: block;
    width: 100%;
    height: 1px;
    background: #444; 
}
.main .navList .bottomSelect {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.main .contentBox .aboutThisCourse {
    width: 100%;
    height: 100%;
    position: relative;
}
.main .contentBox .aboutThisCourse .course-detail {
    padding-top: 80px;
    width:1000px;
}
.main .contentBox .aboutThisCourse .course-detail .leftBox {
    float: left;
    width: 330px;
    height: 260px;
}
.main .contentBox .aboutThisCourse .course-detail .leftBox {
    margin-left:100px;
    margin-right: 20px;
    background: #fff;
    overflow: hidden; 
}
.main .contentBox .aboutThisCourse .course-detail .leftBox img {
    width: 330px;
    height: 210px;
}
.main .contentBox .aboutThisCourse .course-detail .leftBox .timeLimit .time{
    width: 330px;
    font-size: 18px;
    color: #444;
    margin-top: 2px;
    text-align: center;
}
.main .contentBox .aboutThisCourse .course-detail .leftBox .timeLimit .time span {
    font-size: 24px;
    color: #f60;
}
.main .contentBox .aboutThisCourse .course-detail .rightBox {
    float: left;
    width: 450px;
    height: 260px;
    position: relative;
}
.main .contentBox .aboutThisCourse .course-detail .rightBox .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 450px;
}
.main .contentBox .aboutThisCourse .course-detail .rightBox .top .title {
    font-size:20px;
    color: #666;
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main .contentBox .aboutThisCourse .course-detail .rightBox .top .teacher {
    margin-top: 20px;
    font-size: 16px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main .contentBox .aboutThisCourse .course-detail .rightBox .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}
.main .contentBox .aboutThisCourse .course-detail .rightBox .bottom a {
    font-size: 14px;
    color: #00a2e9;
}
.main .contentBox .aboutThisCourse .course-detail .rightBox .bottom a:hover {
    color: #0c87bc;
}
.main .contentBox .aboutThisCourse .courseBegin-btn {
    position: absolute;
    bottom: 50px;
    right: 50px;
}
.main .contentBox .aboutThisCourse .courseBegin-btn a {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #00a2e9;
    font-size: 14px;
    color: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
.main .contentBox .aboutThisCourse .courseBegin-btn a:hover {
    background: #0c87bc;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
.main .player .controlbar-btns .controlbar-btn {
    margin:0 15px;
}
.main .contentBox .aboutThisCourse .tipBox {
    position: absolute;
    width: 600px;
    bottom: 50px;
    left: 50px;
    font-size: 14px;
    color: #ababab;
}
.main .contentBox .aboutThisCourse .tipBox .tip p {
    line-height: 1.5;
}
.main .contentBox .aboutThisCourse .tipBox .tip .tips-title {
    font-size: 16px;
}
.main .contentBox .aboutThisCourse .tipBox .liveExplain {
    margin-top: 10px;
}
.main .contentBox .aboutThisCourse .tipBox .liveExplain a {
    margin-left: 4px;
    color: #00a4e9;
}
.main .contentBox .aboutThisCourse .tipBox .liveExplain a:hover {
    color:#0c87bc;
}

/*教师端聊天窗口，中间栏*/
.main .contentBox{
    width: 1000px;
    height:901px;
    float: left;
    background-color: #272727;
    display: block;
    overflow:hidden;
}

/*弹窗*/
.coverBox {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
    background:rgba(7,17,27,0.3);
    z-index:99;
}
.coverBox .tipsInfoBox {
    position: fixed;
    top:50%;
    left: 50%;
    width: 500px;
    margin-top: -140px;
    margin-left: -265px;
    padding: 15px 15px 25px;
    text-align: left;
    background: #ffffff;
    z-index: 100;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow:0 0 10px #444;
    -moz-box-shadow: 0 0 10px #444 ;
    box-shadow: 0 0 10px #444 ;
    overflow: hidden;
}
.coverBox .tipsInfoBox .title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
}
.coverBox .tipsInfoBox .title span.closeBtn {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 22px;
    height:22px;
    cursor:pointer;
    background: url("http://www.shenyecg.com/Content/View/img/exit.png") no-repeat center center;
}
.coverBox .tipsInfoBox p {
    font-size: 16px;
    margin-bottom: 10px;
    margin: 0 15px 10px 15px;
}
.coverBox .tipsInfoBox p:last-child {
    margin: 0;
    margin-top: 50px;
}
.coverBox .tipsInfoBox p a {
    text-decoration: none;
    color: #00a2e9;
    word-break: break-all;
}
.coverBox .tipsInfoBox p span.startClass {
    display: block;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #00a2e9;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    margin:0 auto;
}


.signal p {
    position: initial;
    width: 100px;
    height: 30px;
    margin: 0px auto;
    text-align: center;
}
.signal span {
    position: absolute;
    top: 65px;
    display: inline-block;
    width: 2px;
    height: 6px;
    background-color: #1d1d1d;
    margin-top: 6px;
    border-radius: 3px;
}
.signal .first{
    left: 20px;
}
.signal .second{
    left: 25px;
}
.signal .third{
    left: 30px;
}
.signal .fourth{
    left: 35px;
}
.signal .fifth{
    left: 40px;
}

.signal.good span {
    background-color: #20b51e;
}
.signal.middle span:nth-child(n+4) {
    background-color: #666;
}
.signal.middle span {
    background-color: #f1c31a;
}
.signal.bad span {
    background-color: #ec2525;
}
.signal.bad span:nth-child(n+2) {
    background-color: #666;
}
